<template>
    <div ref="chart" style="height: 300px;"></div> <!-- 饼图容器 -->
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';  // 引入ECharts库

const props = defineProps({
    data: Array,  // 接收父组件传递的饼图数据
});

const chart = ref(null);  // 饼图DOM元素引用

onMounted(() => {
    const myChart = echarts.init(chart.value);  // 初始化ECharts实例

    // 配置项
    const option = {
        tooltip: {
            trigger: 'item',
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: props.data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                },
            },
        ],
    };

    myChart.setOption(option);  // 设置图表选项
});
</script>